<template>
  <div>
    <h3>
      readonly 一般防止开发者不小心修改这里面的值了
      用readonly标记一下就是不能修改这里面的值.
      发请求的时候，返回的结果可以用readonly
    </h3>
    <p>
      接受一个对象 (不论是响应式还是普通的) 或是一个
      ref,返回一个原值的只读代理。只读代理是深层的：对任何嵌套属性的访问都将是只读的。它的
      ref 解包行为与 reactive()
      相同，但解包得到的值是只读的。要避免深层级的转换行为，请使用
      shallowReadonly() 作替代。
    </p>
    <p style="height: 2px; background-color: yellow"></p>
    <h4>用户:{{ readonlyStu }}</h4>
    <button @click="setreadonlyStu">readonly的修改</button>
  </div>
</template>

<script>
import {
  ref,
  reactive,
  readonly,
  isRef,
  isReactive,
  isReadonly,
  isProxy,
} from "vue";
export default {
  name: "Readonly",
  setup() {
    // 普通对象
    // let stu = {
    //   sname: "宁静致远",
    //   sadddress: "郑州市",
    //   other: {
    //     hobby: "写字",
    //   },
    // };
    // console.log(stu); // stu就是一个普通对象 不具备响应式

    // proxy 对象
    let stu = reactive({
      sname: "宁静致远",
      sadddress: "郑州市",
      other: {
        hobby: "写字",
      },
    });
    // const man ref(true);
    const man = ref({
      a: 888888,
    });
    console.log(man);
    console.log("isReactive: ", isReactive(man)); // false
    console.log("isRef: ", isRef(man)); //true
    console.log("isProxy: ", isProxy(man.value)); // true
    console.log("isReadonly: ", isReadonly(man)); // false

    let readonlyStu = readonly(stu);
    console.log('isReadonly',isReadonly(readonlyStu));  //true
    let setreadonlyStu = () => {
      // Set operation on key "sname" failed:target isreactivity
      // readonlyStu.sname = "一束棉花糖";  // 声明普通对象和proxy对象都不能修改
      // readonlyStu.other.hobby = "逛街~"  // 不能修改
      readonlyStu.other.age = 18; // 增加一个属性也是添加不进去
      console.log(readonlyStu);
    };

    return {
      readonlyStu,
      setreadonlyStu,
    };
  },
};
</script>

<style lang="less" scoped></style>
